<template>
  <div class="home-content pt-4">
    <!--走马灯-->
    <div>
      <el-carousel
        height="500px"
        :autoplay="false"
        loop
        indicator-position="outside"
        ref="carouselRef"
        @change="slideChange"
      >
        <el-carousel-item
          v-for="(item, index) in homeReInfo.broadCastList"
          :key="index"
        >
          <el-image
            class="w-full h-full"
            :src="item.url"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :initial-index="4"
            fit="cover"
            style="width: 100%; max-height: 100%"
          />
        </el-carousel-item>
      </el-carousel>
    </div>
    <!--服务项目-->
    <el-row>
      <el-col :md="5" :lg="5" :xl="5" hidden-md-and-down></el-col>
      <el-col :xs="24" :sm="24" :md="14" :lg="14" :xl="14">
        <div class="flex title-content justify-center pt-5 pb-5">
          <span class="mt-5"></span>
          <h3 class="pr-4 pl-4">服务项目</h3>
          <span class="mt-5"></span>
        </div>
        <div>
          <el-row>
            <el-col
              :xs="24"
              :sm="24"
              :md="12"
              :lg="8"
              :xl="8"
              v-for="(item, index) in homeReInfo.serviceList"
              :key="index"
            >
              <ServiceHomeItem :data="item" /> </el-col
          ></el-row>
        </div>
      </el-col>
      <el-col :md="5" :lg="5" :xl="5" hidden-md-and-down></el-col>
    </el-row>
    <!--说明-->

    <el-row class="descrip-content">
      <el-col
        :xs="24"
        :sm="12"
        :md="12"
        :lg="6"
        :xl="6"
        v-for="(item, index) in homeReInfo.desList"
        :key="index"
        ><DescripHomeItem :data="item"
      /></el-col>
    </el-row>
    <!--步骤-->

    <el-row class="pb-10">
      <el-col :md="5" :lg="5" :xl="5" hidden-md-and-down></el-col>
      <el-col :xs="24" :sm="24" :md="14" :lg="14" :xl="14">
        <div class="flex title-content justify-center pt-5 pb-5">
          <span class="mt-5"></span>
          <h3 class="pr-4 pl-4">购买流程</h3>
          <span class="mt-5"></span>
        </div>
        <template v-if="rowCount == '4'">
          <StepsList
            v-if="isShow"
            :steps-data="homeReInfo.cartSteps"
            :rowCount="4"
            :active="active"
            ref="stepsList"
          />
        </template>
        <template v-if="rowCount == '3'">
          <StepsList
            v-if="isShow"
            :steps-data="homeReInfo.cartSteps"
            :rowCount="3"
            :active="active"
            ref="stepsList"
          />
        </template>
        <template v-if="rowCount == '2'">
          <StepsList
            v-if="isShow"
            :steps-data="homeReInfo.cartSteps"
            :rowCount="2"
            :active="active"
            ref="stepsList"
          />
        </template>
        <template v-if="rowCount == '1'">
          <div style="width: calc(100vw - 3rem); margin-left: 3rem">
            <StepsList
              v-if="isShow"
              :steps-data="homeReInfo.cartSteps"
              :rowCount="1"
              :active="active"
              ref="stepsList"
            />
          </div>
        </template>
      </el-col>
      <el-col :md="5" :lg="5" :xl="5" hidden-md-and-down></el-col>
    </el-row>

    <!--合作伙伴-->
    <el-row>
      <el-col :md="5" :lg="5" :xl="5" hidden-md-and-down></el-col>
      <el-col :xs="24" :sm="24" :md="14" :lg="14" :xl="14">
        <div class="flex title-content justify-center pt-5 pb-5">
          <span class="mt-5"></span>
          <h3 class="pr-4 pl-4">合作伙伴</h3>
          <span class="mt-5"></span>
        </div>
        <div>
          <el-row>
            <el-col
              :xs="24"
              :sm="24"
              :md="12"
              :lg="6"
              :xl="6"
              v-for="(item, index) in homeReInfo.cooperativePartner"
              :key="index"
            >
              <CooperativeItem :data="item" /> </el-col
          ></el-row>
        </div>
      </el-col>
      <el-col :md="5" :lg="5" :xl="5" hidden-md-and-down></el-col>
    </el-row>
  </div>
</template>
<script lang="ts" setup>
import { useAppStore } from "@/store";
import { DeviceEnum } from "@/enums/DeviceEnum";
import { WIDTH } from "@/utils/commonSize";
import { companyBaseInfo } from "@/api/base_info";
import UAParser from "ua-parser-js";
import { os } from "@/utils/device";
const appStore = useAppStore();
const isMobile = computed(() => appStore.device === DeviceEnum.MOBILE);
const width = useWindowSize().width;

const rowCount = ref(4);
const stepsList = ref(null);

const stepInit = () => {
  window.addEventListener("resize", () => {
    widthChange();
  });
};
const widthChange = () => {
  const widthVal = width.value;
  if (widthVal > 1440) {
    rowCount.value = 4;
  } else if (widthVal < 992) {
    rowCount.value = 1;
  } else if (widthVal > 992 && widthVal < 1080) {
    rowCount.value = 2;
  } else if (widthVal > 1080 && widthVal < 1440) {
    rowCount.value = 3;
  }
};

import { homeInfo } from "@/api/home";
const homeReInfo = ref({});
const isShow = ref(false);
const getHomeInfo = async () => {
  const res = await homeInfo();
  homeReInfo.value = res.data;
  isShow.value = true;

  for (let item in homeReInfo.value.broadCastList) {
    let ele = homeReInfo.value.broadCastList[item];
    const str = `${window.location.origin}${ele.url}`;
    ele.url = str;
  }
  for (let item in homeReInfo.value.serviceList) {
    let ele = homeReInfo.value.serviceList[item];
    const str = `${window.location.origin}${ele.icon}`;
    ele.icon = str;
  }
  for (let item in homeReInfo.value.cooperativePartner) {
    let ele = homeReInfo.value.cooperativePartner[item];
    const str = `${window.location.origin}${ele.url}`;
    ele.icon = str;
  }
};
onMounted(() => {
  getHomeInfo();
  stepInit();
  widthChange();
});
</script>
<style lang="scss" scoped>
.home-content {
  font-size: var(--text-primary-size);

  .title-content {
    color: var(--color-text-title);

    span {
      width: 40px;
      height: 1px;
      background-color: var(--color-text-title);
    }

    h3 {
      font-size: var(--text-h3-size);
    }
  }
  .article-content {
    text-indent: 4ch;
  }
  .descrip-content {
    padding: 10rem 0;

    background: url("../../assets/images/middle.jpg") no-repeat;
  }
}
</style>
